<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/vue.global.js"></script>
    <title>3-modifier</title>
  </head>

  <body>
    <div id="modifier">
      <!-- .lazy -->
      <!-- 在默认情况下，v-model 在每次 input 事件触发后
        将输入框的值与数据进行同步 (除了上述输入法组织文字时)。
        你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步： -->
      <!-- 在“change”时而非“input”时更新 -->
      <input v-model.lazy="msg" />

      <!-- .number -->
      <!-- 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： -->
      <input v-model.number="age" type="number" />

      <!-- .trim -->
      <input v-model.trim="msg" />
    </div>
    <script>
      Vue.createApp({}).mount('#modifier');
    </script>
  </body>
</html>
